<template>
	<view class='city'>
		<view class='line'></view>
		<view class='content'>
			<view v-if='cityRow.destinationSrc!=null&&cityRow.destinationSrc.length>0' class='top' @click='jumpPage' :data-url="cityRow.destinationSrc">
				<image class='img1' :src="destinationImg"></image>
				<view class='right'>
					<view class='city_name'>{{cityRow.destinationName}}</view>
					<view style='width:300upx;'>
						<wxc-elip class='font-r' :line='1' style='font-size:30upx;line-height:30upx;color:#888888;width:100%;'>{{cityRow.destinationIntroduce}}</wxc-elip>
					</view>
					<image class='icon_right' src='/static/img/icon_right.png'></image>
				</view>
			</view>
			<view class='nav'>
				<view class='navbox' v-for="(item,index) in menus" :key="index" @click='onMenuClick' :data-title="item.title">
					<image class='icon' :src='item.img'></image>
					<view>{{item.title}}</view>
				</view>
			</view>
			<view class='listul'>
				<block v-for="(item,index) in lineRoad" :key="index">
					<view class='list' @click='onLineClick' :data-businessSrc='item.businessSrc'>
						<view class='over1 title'>{{item.businessName}}</view>
						<view class='list-right'>
							<view class='icon_font'>精品线路</view>
							<image class='icon_right' src='/static/img/icon_right.png'></image>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import wxcElip from "@/components/custom/wxc-elip.vue"
	export default {
		components: {
			wxcElip,
		},
		data() {
			return {
				area: '',
				cityRow: [],
				destinationImg: '',
				menus: [{
						img: "/static/img/s4.png",
						title: "景区"
					},
					{
						img: "/static/img/s5.png",
						title: "酒店"
					},
					{
						img: "/static/img/s6.png",
						title: "线路"
					},
					{
						img: "/static/img/s7.png",
						title: "美食"
					},
					{
						img: "/static/img/s8.png",
						title: "攻略"
					}
				],
				lineRoad: []
			}
		},
		onLoad: function(options) {
			var that = this;

			if (options && options.city) {
				this.area = options.city;
			} else {
				this.area = this.pub.getLocalcity();
			}

			uni.setNavigationBarTitle({
				title: this.area
			});

			this.getDestination();
			this.getList();
		},
		methods: {
			getDestination() {
				this.$postApi(this.$path.GET_BUSINESS_SEARCH, {
					destinationName: this.area
				}).then(res => {
					let datas = res.data;
					if (datas.success) {
						if (datas.rows.length > 0) {
							this.destinationImg = this.pub.fmtHttpUrl(datas.rows[0].destinationImg);
							this.cityRow = datas.rows[0];
						}
					}
				})
			},
			getList: function() {
				this.$postApi(this.$path.GET_BUSINESS_LIST, {
					businessId: "",
					businessName: null,
					businessType: 0,
					descType: 1,
					addressCity: this.area,
					page: 1,
					rows: 5
				}).then(res => {
					let data = res.data;
					for (let i = 0; i < data.rows.length; i++) {
						data.rows[i].labels = []
						if (data.rows[i].businessLabel) {
							data.rows[i].labels = data.rows[i].businessLabel.replace(new RegExp("；", "gm"), ";").split(';');
						}
					}
					var content = data.rows;
					this.lineRoad = content;
				})
			},
			jumpPage(e) {
				if (this.pub.getIsPublishing()) {
					uni.showToast({
						title: '敬请期待...',
						icon: 'none'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/webview/staticwebview/index?src=' + encodeURIComponent(e.currentTarget.dataset.url),
					animationType: "pop-in",
					animationDuration: 200
				})
			},
			onLineClick: function(e) {
				console.log(e)
				if (this.pub.getIsPublishing()) {
					uni.showToast({
						title: '敬请期待...',
						icon: 'none'
					})
					return
				}
				this.pub.jumpToWeb(e.currentTarget.dataset.businesssrc)
			},
			onMenuClick: function(e) {
				// console.log(e)
				switch (e.currentTarget.dataset.title) {
					case '景区':
						uni.navigateTo({
							url: '/pages/scence/scencelist?city=' + this.area,
							animationType: "pop-in",
							animationDuration: 200
						})
						break;
					case '酒店':
						uni.navigateTo({
							url: '/pages/hotel/hotelquery?city=' + this.area,
							animationType: "pop-in",
							animationDuration: 200
						})
						break;
					case '线路':
						uni.navigateTo({
							url: '/pages/route/routelist?city=' + this.area,
							animationType: "pop-in",
							animationDuration: 200
						})
						break;
					case '美食':
						uni.navigateTo({
							url: '/pages/food/foodlist?city=' + this.area,
							animationType: "pop-in",
							animationDuration: 200
						})
						break;
					case '攻略':
						uni.switchTab({
							url: '/pages/strategy/strategy',
							animationType: "pop-in",
							animationDuration: 200
						})
						break;
				}
			},
		}
	}
</script>

<style scoped>
	.city .content {
		padding: 0 40upx;
	}

	.line {
		width: 100%;
		height: 2upx;
		background: #e7ebee;
	}

	.top {
		margin: 26upx 0;
		padding: 22upx 26upx;
		box-shadow: 0upx 5upx 20upx 1upx rgba(195, 195, 195, 0.53);
		display: flex;
	}

	.top .img1 {
		width: 253upx;
		height: 148upx;
		margin-right: 30upx;
		flex-shrink: 0;
	}

	.top .right {
		flex: 1;
		position: relative;
	}

	.top .right .city_name {
		font-size: 40upx;
		font-weight: bold;
		color: #333;
		padding: 22upx 0 28upx;
	}

	.top .right .city_del {
		font-size: 15px;
		color: #888;
		margin-right: 24upx;
		/* width: calc(100% - 7upx); */
	}

	.icon_right {
		width: 14upx;
		height: 24upx;
		position: absolute;
		right: 0px;
		top: 50%;
	}

	.nav {
		display: flex;
		justify-content: space-around;
		font-size: 10px;
		color: #333;
		align-items: center;
	}

	.nav .navbox {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.nav .navbox .icon {
		width: 66upx;
		height: 60upx;
		margin: 50upx 0 10upx;
	}

	.listul {
		/* border-bottom: 2upx solid rgba(219,218,218,1); */
	}

	.listul .list {
		font-size: 30upx;
		color: #333;
		position: relative;
		padding: 52upx 0upx;
		margin: 0 27upx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2upx solid rgba(219, 218, 218, 1);
	}

	.listul .list .title {
		width: 80%;
	}

	.listul .list:after {
		content: '.';
		font-weight: bold;
		display: block;
		position: absolute;
		left: -20upx;
		top: 30%;
	}

	.list-right {
		width: 170upx;
		color: #888;
		font-size: 15px;
		position: relative;
	}

	.list-right .icon_font {
		margin-right: 24upx;
	}

	.list-right .icon_right {
		width: 14upx;
		height: 24upx;
		position: absolute;
		right: 0upx;
		top: 59%;
		margin-top: -12upx;
	}
</style>
